<template>
  <li class="sea-menu-item pull-right" @click="onClick" title="使用文档">
    <i class="fa fa-fw fa-book"></i>
  </li>
  <el-drawer v-model="expand" :with-header="false">
    <h5>操作文档</h5>
    <div>
        <a v-for="(item, idx) in reverse" :key="idx" class="text-block inline-block" @click="openDocPage(item)">
          {{ item.label }}
        </a>
    </div>

    <h5>运行环境</h5>
    <div>
        <a v-for="(item, idx) in doc" :key="idx" class="text-block inline-block" @click="openDocPage(item)">
          {{ item.label }}
        </a>
    </div>

    <h5>系统日志</h5>
    <div>
        <a v-for="(item, idx) in log" :key="idx" class="text-block inline-block" @click="openLogPage(item)">
          {{ item.label }}
        </a>
    </div>

    <h5>通用设置</h5>
    <div>
      <label v-for="(item, idx) in settings" :key="idx" class="text-block inline-block"
             @click="doSetting($event, item)">
        <el-checkbox v-model="item.value" :label="item.label"></el-checkbox>
      </label>
    </div>


    <h5>参数配置</h5>
    <el-row class="padding">
      <el-col :span="24">
        <label>
          日志文件目录
          <sea-tips>
            <p>此功能用于配置系统日志目录，方便查看系统执行日志。</p>
          </sea-tips>
          <el-input value="C://log"></el-input>
        </label>
      </el-col>
      <el-col :span="24">
        <label>
          Excel容量上限
          <sea-tips>
            <p>设置Excel文件数量上限，当文件数量达到上限时，系统将提醒用户清除文件。</p>
          </sea-tips>
          <el-input value="50"></el-input>
        </label>
      </el-col>
    </el-row>

    <h5>消息列表</h5>
    <el-row>
      <el-col class="text-block">
        <a>【消息1】你有一则新消息</a>
        <p style="text-align: right"><i class="fa fa-clock-o"></i>2023-03-03</p>
      </el-col>
      <el-col class="text-block">
        <a>【消息2】你有一则新消息</a>
        <p style="text-align: right"><i class="fa fa-clock-o"></i>2023-03-03</p>
      </el-col>
      <el-col class="text-block">
        <a>【消息3】你有一则新消息</a>
        <p style="text-align: right"><i class="fa fa-clock-o"></i>2023-03-03</p>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<script setup>
import {ref} from "vue";
import router from "@/router/index";

const expand = ref(false);

const reverse = ref([
    {label: '系统介绍', value: '/doc/blog', title: '一些 markdown 文档'}
    , {label: 'open-api', value: '/doc/open-api', title: '系统接口文档，开发人员会用到'}
    , {label: '接口文档', value: '/doc/api-mapping', title: '一些接口映射信息，开发人员会用到'}
]);

const doc = ref([
    {label: 'icon', value: '/doc/icons'}
    , {label: 'tools', value: '/doc/tools'}
    , {label: 'mybatis', value: '/doc/ibatis'}
    , {label: 'environment', value: '/doc/props'}
]);

const log = ref([
    {label: 'slf4j', value: '/log/slf4j'}
    , {label: '访问日志', value: '/log/access'}
    , {label: '登录日志', value: '/log/login'}
]);

const settings = ref([
    {label: '禁用任务', value: false, name: ''}
    , {label: '禁用消息', value: false, name: ''}
    , {label: '禁用文档', value: false, name: ''}
]);

const onClick = () => {
    expand.value = true;
}

const openDocPage = (item) => {
    router.push(item.value);
    expand.value = false;
};
const openLogPage = (item) => {
    router.push(item.value);
    expand.value = false;
};
const doSetting = (e, item) => {
    e.preventDefault();
    console.log(item);
}

</script>

<style scoped>

</style>